import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class LifeCyclePage extends Component {
    static defaultProps = {
        msg: 'omg'
    };

    static propTypes = {
        msg: PropTypes.string
        };

    constructor(props) {
        super(props);
        this.state = { count: 0 };
        console.log('constructor');
    }

    static getDerivedStateFromProps(props, state) {
        console.log('getDerivedStateFromProps', props);
        const { count } = state;
        return count > 5 ? { count: 0 } : null;
    }

    // componentWillMount() {
    //     console.log('componentWillMount');
    // }
    componentDidMount() {
        console.log('componentDidMount');
    }

    shouldComponentUpdate(nextProps, nextState, snapshot) {
        // const { count } = nextState;
        console.log('shouldComponentUpdate', nextState, this.state);
        return true;
    }

    getSnapshotBeforeUpdate(prevProps, prevState) {
        console.log('getSnapshotBeforeMount', prevProps, prevState);
        return {
            msg: '我是getSnapshotBeforeMount'
        };
    }

    // componentWillUpdate(nextProps, nextState, nextContext) {
    //     console.log('componentWillUpdate');
    // }

    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log('componentDidUpdate', prevProps, prevState, snapshot);
    }

    setCount = () => {
        this.setState({
            count: this.state.count + 1
        });
    }

    render() {
        console.log('render', this.props);
        const { count} = this.state;
        return (
            <div>
                <h3>LifeCyclePage</h3>
                {/*<h1>{ msg }</h1>*/}
                <p>{ count }</p>
                <button onClick={this.setCount}>{this.state.count} 改变count</button>
                {/*{count % 2 && <Child count={count}/> }*/}
                <Child count={count}/>
            </div>
        );
    }
}

class Child extends Component {
    componentWillReceiveProps(nextProps, nextContext) {
        console.log('componentWillReceiveProps', nextProps, nextContext);
    }

    componentWillUnmount() {
        console.log('componentWillUnmount');
    }

    render() {
        console.log('Child render');
        const { count } = this.props;
        return (
            <div>
                <h3>Child</h3>
                <p>{count}</p>
            </div>
        );
    }
}
